<template>
  <div class="home">
    <Header />
    <!-- 视频 -->
    <div class="image">
      <video ref="video" id="video" src="/video2021.mp4" controls autoplay muted></video>
    </div>
    <!-- 导航 -->
    <div class="nav">
      <div>
        <van-icon name="location-o" color="#1989fa"  />
        参观指南</div>
      <div>
        <van-icon name="cart-o" color="#1989fa" />
        车展票务</div>
      <div>
        <van-icon name="more-o" color="#1989fa" />
        车展信息</div>
      <div>
        <van-icon name="logistics" color="#1989fa" />
        车展交通</div>
      <div>
        <van-icon name="shop-o" color="#1989fa" />
        配套服务</div>
      <div>
        <van-icon name="service" color="#1989fa" />
        车展APP</div>
    </div>
    <!-- 车展热点 -->
    <div class="exhibitionNews" v-if="data">
      <p>车展热点</p>
      <div v-for="(item,index) in data.data" :key="index" >
        <div>
          <van-icon name="fire-o"  color='red' size="20" v-if="index<=6"/>
         <router-link  :to="`/media?newsId=${item.newsId}`">
          {{item.newstitle}}</router-link>
          </div>
        <div v-if="index>=6">
          <img :src="item.newsimg" alt="">
        </div>
      </div>
      <div> </div>
    </div>
    <!-- 场馆展览图 -->
    <div class="map">
      <p>展览平面图</p>
      <img src="/image/venue_map.jpg" alt="">
    </div>
    <!-- 下载中心 -->
    <div class="download">
      <h2>下载中心</h2>
      <div>
        <p>官方小程序</p>
        <img src="/image/xiaochengxu.png" alt="">
      </div>
      <div>
        <p>官方微信</p>
        <img src="/image/weixin.jpg" alt="">
      </div>
      <div>
        <p>官方APP</p>
        <img src="/image/app_qrcode.png" alt="">
      </div>
      <div class="home-footer">
        <h4>主办单位</h4>
        <h5>上海市徐汇区达内教育web2108班烂尾项目队</h5>
      </div>
    </div>
<Footer />
  </div>
</template>

<script>
import Footer from '../components/Footer.vue'
import Header from '../components/Header.vue'

export default {
  components: { Header, Footer },
  name: 'Home',
  data() {
    return {
      data: null,
    }
  },
  methods: {
    getdata() {
      // /api = http://127.0.0.1:8080
      let url='/api/admin/index'
      this.axios.get(url).then(res=>{
        console.log(res);
        this.data=res.data
        //console.log(data);
      })
    },
  },
  mounted () {
    this.getdata()
  },
}
</script>
<style scoped lang='scss'>
.exhibitionNews{
  padding: 10px;
}
.home{
  overflow: scroll;
  position: relative;
.nav{
  display: flex;
  flex-wrap: wrap;
  div{
    width: 30%;
    text-align: center;
    font-size: 20px;
    margin: 10px 6px;
    box-sizing: border-box;
    .van-icon{
      display: block;
      text-align: center;
      &::before{
        font-size: 26px;
        padding-bottom: 10px;
      }
    }
  }
}
.image{
  margin: 5px 10px ;
  video{
    width: 100%;
  }
}
.map{
  p{
    margin: 10px;
    font-size: 21px;
    font-weight: 600;
  }
  img{
    width: 100%;
  }
}
.download{
  padding-bottom: 60px;
  h2{
    text-align: center;
  }
  div{
    width: 30%;
    display: inline-block;
    padding: 0 5px;
    text-align: center;
    img{
      width: 100%;
    }
    p{
      font-size: 18px;
      text-align: center;
      padding: 10px 0;
      margin: 0;
    }
  }
  .home-footer{
    width: 100%;
    background-color: #f5f5f5;
    padding: 5px 0;
    h4,h5{
      margin: 10px;
      color: #a09b9b;
    }
  }
}
.exhibitionNews{
  p{
    margin: 10px;
    font-size: 21px;
    font-weight: 600;
  }
  div{
    &:nth-child(2){
       color: red;
     }
     &:nth-child(3){
       color: red;
     }
     &:nth-child(4){
       color: red;
     }
    div{
      padding:5px ;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      width:90%;
      display: inline-block;
     
      font-size: 18px;
      img{
        width: 100%;
      }
    }
  }
}
}
</style>
